49. How to implement dimension drill-down function when using VTable pivot table component?—

Problem title

How to implement dimension drill-down function when using VTable pivot table component?

Problem Description

Does the VTable pivot table support drill-down interaction on the front end?

Solution

Configuring this will give you an icon and listen for events (https://visactor.io/vtable/api/events#DRILLMENU_CLICK). Call the interface updateOption to update the full configuration after obtaining new data.

Code Example

You can refer to the official demo: https://visactor.io/vtable/demo/data-analysis/pivot-analysis-table-drill.
Key configuration for drillDown:

const option = {
  records: data,
  rows: [
    {
      dimensionKey: 'Category',
      title: 'Category',
      drillDown: true,
      headerStyle: {
        textStick: true
      },
      width: 'auto'
    }
  ],
  columns: [
    {
      dimensionKey: 'Region',
      title: 'Region',
      headerStyle: {
        textStick: true
      },
      width: 'auto'
    }
  ],
  indicators: ...
};</br>

After configuration, the drill-down icon is displayed, and the click event of the icon drillmenu_click is listened. In the event processing logic, updateOption is called to update the configuration, and the configured drill-down icon changes to the drill-up icon drillUp.

tableInstance.on('drillmenu_click', args => {
  if (args.drillDown) {
    if (args.dimensionKey === 'Category') {
      tableInstance.updateOption({
        records: newData,
        rows: [
          {
            dimensionKey: 'Category',
            title: 'Category',
            drillUp: true,
            headerStyle: {
              textStick: true
            },
            width: 'auto'
          },
          {
            dimensionKey: 'Sub-Category',
            title: 'Sub-Catogery',
            headerStyle: {
              textStick: true
            },
            width: 'auto'
          }
        ],
        columns: ...,
        indicators: ...
      });
    }
  }</br>

Result Display

Here is the official website example effect:

Problem title

Problem Description

Solution

Code Example

Result Display

相关文档